import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { DNavBar, DImagesupload, DAgree } from '@/components'
import { AtButton, AtList, AtListItem } from 'taro-ui'
import './caruploadinfo.scss'
import http from '@/api'

export default class CaruploadinfoBox extends Component {

    constructor(props) {
        super(props)
        this.state = {
            list: [],
            firstList: [],
            secondList: [],
            threeList: [],
            fourList: [],
            bankInfo: {},
            chooiseBankCode: ''
        }
    }
    componentDidShow() {
        this.getChooiseBankCode()
    }
    onHandleChange(status) {
        this.setState({
            status
        })
    }
    getChooiseBankCode() {
        let loc = JSON.parse(localStorage.getItem('chooiseBankList'))
        if (loc) {
            let chooiseBankCode = loc.cardNumber + ' ' + loc.belongToBank
            this.setState({
                chooiseBankCode,
                bankInfo: {
                    bankName: loc.belongToBank,//银行名称
                    bankNo: loc.cardNumber,//string
                    bankUserName: loc.cardholderName
                }
            })
        }
    }
    uploadOrderFile(id) {
        let { firstList, secondList, threeList, fourList } = this.state
        let orderTransCarFileList = [...firstList, ...secondList, ...threeList, ...fourList]
        let orderTransCarVO = {
            id: `${id}`,
            orderTransCarFileList,
            ...this.state.bankInfo
        }
        if (firstList.length === 0) {
            return this.tipShowTaost('请上传车辆采购合同照片！')
        }
        if (secondList.length === 0) {
            return this.tipShowTaost('请上传车辆交接凭证！')
        }
        if (threeList.length === 0) {
            return this.tipShowTaost('请上传付款凭证！')
        }
        if (threeList.length === 0) {
            return this.tipShowTaost('请上传付款凭证！')
        }
        // if (!this.state.bankInfo.bankNo) {
        //     return this.tipShowTaost('请选择银行卡！')
        // }

        http.uploadOrderFile(orderTransCarVO).then(res => {
            Taro.redirectTo({
                url: `/pages/carsalesorder/carsalesorder?active=1`
            })
        })
    }

    tipShowTaost(title) {
        return Taro.showToast({
            title,
            icon: 'none'
        })
    }
    onChangeFirst(item) {
        let { firstList } = this.state
        item.map(item => {
            firstList.push({
                "cfFileId": `${item.id}`,
                "cfFileName": '',
                "cfType": 1,
                "cfFileUrl": `${item.url}`
            })
        })
        this.setState({
            firstList
        })
    }
    onChangeSecond(item) {
        let { secondList } = this.state
        item.map(item => {
            secondList.push({
                "cfFileId": `${item.id}`,
                "cfFileName": '',
                "cfType": 2,
                "cfFileUrl": `${item.url}`
            })
        })
        this.setState({
            secondList
        })
    }
    onChangeThree(item) {
        let { threeList } = this.state
        item.map(item => {
            threeList.push({
                "cfFileId": `${item.id}`,
                "cfFileName": '',
                "cfType": 3,
                "cfFileUrl": `${item.url}`
            })
        })
        this.setState({
            threeList
        })
    }
    onChangeFour(item) {
        let { fourList } = this.state
        item.map(item => {
            fourList.push({
                "cfFileId": `${item.id}`,
                "cfFileName": '',
                "cfType": 4,
                "cfFileUrl": `${item.url}`
            })
        })
        this.setState({
            fourList
        })
    }
    onHandleImage = (status = '') => {
        Taro.navigateTo({
            url: `/pages/itemImages/itemImages?status=${status}`
        })
    }

    onHandleSubmit() {
        let { id } = this.$router.params
        this.uploadOrderFile(id)

    }
    onChangeChooiseBank() {
        Taro.navigateTo({
            url: '/pages/userbank/userbank?ty=1'
        })
    }

    render() {
        const itemImagesHtml1 =
            <View className='b_caruploadinfo__images_enterpris'>
                <View className='item_title'>
                    <Text className='item_title__left'>车辆采购合同</Text>
                    <Text className='item_title__dec'>（如有多页面按顺序上传）</Text>
                    {/*<DAgree type='1' value={status} onHandleChange={this.onHandleChange.bind(this)} text={'《企业认证协议》'}></DAgree>*/}
                    <Text className='item_title__right' onClick={this.onHandleImage.bind(this, 'checai')}>查看范例</Text>
                </View>
                <View className="item_images__box">
                    <DImagesupload count={8} onChangeImages={this.onChangeFirst.bind(this)}></DImagesupload>
                </View>
            </View>
        const itemImagesHtml2 =
            <View className='b_caruploadinfo__images_enterpris'>
                <View className='item_title'>
                    <Text className='item_title__left'>车辆交接凭证</Text>
                    <Text className='item_title__dec'>（如有多页面按顺序上传）</Text>
                    <Text className='item_title__right' onClick={this.onHandleImage.bind(this, 'carjion')}>查看范例</Text>
                </View>
                <DImagesupload count={8} onChangeImages={this.onChangeSecond.bind(this)}></DImagesupload>
            </View>
        const itemImagesHtml3 =
            <View className='b_caruploadinfo__images_enterpris'>
                <View className='item_title'>
                    <Text className='item_title__left'>付款凭证</Text>
                    <Text className='item_title__right' onClick={this.onHandleImage.bind(this, 'payinfo')}>查看范例</Text>
                </View>
                <DImagesupload count={1} onChangeImages={this.onChangeThree.bind(this)}></DImagesupload>
            </View>
        const itemImagesHtml4 =
            <View className='b_caruploadinfo__images_enterpris'>
                <AtList>
                    {/* iconInfo={{ size: 20, color: '#FF4949', value: 'star_', }} */}
                    <AtListItem  title='请选择银行卡' onClick={this.onChangeChooiseBank.bind(this)} note={this.state.chooiseBankCode} arrow='right' >

                    </AtListItem>
                </AtList>
                <View className='item_title'>
                    <Text className='item_title__left'>其他</Text>
                    <Text className='item_title__dec'>（如有补充凭证，请上传）</Text>
                </View>
                <DImagesupload count={8} onChangeImages={this.onChangeFour.bind(this)}></DImagesupload>
            </View>

        return (
            <View className='b_caruploadinfo'>
                <DNavBar title='上传资料'></DNavBar>
                <View className='b_caruploadinfo__box'>
                    <View className='b_caruploadinfo__images'>
                        <View className='b_caruploadinfo__images_title'>请上传以下资料</View>
                        {/* {itemPeople} */}
                        <View className="b_caruploadinfo__images_item">
                            {itemImagesHtml1}
                        </View>
                        <View className="b_caruploadinfo__images_item">
                            {itemImagesHtml2}
                        </View>
                        <View className="b_caruploadinfo__images_item">
                            {itemImagesHtml3}
                        </View>
                        <View className="b_caruploadinfo__images_item">
                            {itemImagesHtml4}
                        </View>
                    </View>
                    <View className='b_caruploadinfo__footer'>
                        <AtButton className='item_btn' onClick={this.onHandleSubmit.bind(this)}>提交</AtButton>
                    </View>
                </View>
            </View>
        )
    }
}
